<template>
  <div>
    <el-dialog title="提示" :visible.sync="visible" width="70%" :close-on-click-modal='false' :before-close="handleClose">
      <el-form :inline="true" :model="cardData" class="demo-form-inline">
        <el-form-item label="卡类型：">
          <el-select v-model="cardData.cardType" placeholder="全部">
            <el-option v-for="item in cardTypeList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发售状态：">
          <el-select v-model="cardData.status" placeholder="全部">
            <el-option v-for="item in billTypeList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="卡名称：">
          <el-input v-model="cardData.name" placeholder="请输入卡名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="listBox">
        <!-- <div class="listBox_head">
          <el-button type="primary" @click="addCardMore">添加至参保预付卡</el-button>
        </div> -->
        <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableDataTwo"
          @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange" keyString="assetId">
          <template v-slot:validityTypeDict="{ scope }">
            <div v-if="scope.row.cardType == 9">{{scope.row.usableCount}}天</div>
            <div v-else>{{scope.row.validityTypeDict}}</div>
          </template>
          <template v-slot:operate="{ scope }">
            <el-button @click="addCard(scope.row.assetId)" size="mini" type="text" v-if="scope.row.type==3">添加至参保预付卡
            </el-button>
            <el-button :disabled="true" size="mini" type="text" v-if="scope.row.type==1">无法承保</el-button>
            <el-button :disabled="true" size="mini" type="text" v-if="scope.row.type==2">已添加</el-button>
          </template>
        </ex-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    mapState
  } from "vuex";
  // components
  import Loading from '@/components/Loading/index'
  // api
  import {
    adminDict,
    merchantCardList,
    addInsuranceCard
  } from "@/api/merchants";
  import handlePageMixin from "@/mixins/handlePageMixin";
  export default {
    components: {
      Loading
    },
    mixins: [handlePageMixin],
    props: {
      visible: Boolean,
      id: String,
      path: String,
    },
    data() {
      return {
        loading: false,
        cardData: {
          merchantId: "", //商家id
          cardType: "", //卡类型 asset_card_type
          name: "", //卡名称
          status: "", //发售状态 asset_status
        },
        tableDataTwo: [],
        billTypeList: [],
        tableColumn: [{
            prop: "cardTypeDict",
            label: "卡类型",
            width: 120
          },
          {
            prop: "name",
            label: "卡名称",
          },
          {
            prop: "statusDict",
            label: "发售状态",
            width: 120
          },
          {
            prop: "createTime",
            label: "发卡时间"
          },
          {
            prop: "validityTypeDict",
            slot: true,
            slotName: "validityTypeDict",
            label: "有效期",
            width: 140
          },
          {
            prop: "issueTotal",
            label: "计划发售量",
            width: 120
          },
          {
            prop: "buyMoney",
            label: "发售金额（￥）/张",
            width: 150
          },
          {
            prop: "used",
            label: "已发售卡/张",
            width: 120
          },
          {
            label: "操作",
            slot: true,
            slotName: "operate",
            fixed: "right",
            width: 120
          },
        ],
      }
    },
    computed: {
      ...mapState({
        cardTypeList: function (state) {
          return state.common["asset_card_type"]; // 要取this的实例，只能用不同函数，不能用箭头函数
        },
      }),
    },
    created() {
      console.log(this.id)
      this.getTransactiontype()
      this.getList()
    },
    methods: {
      handleClose() {
        this.$emit('update:visible', false)
      },
      getTransactiontype() {
        //获取卡状态
        const params = {
          dictType: "asset_status",
        };
        adminDict(params).then((res) => {
          var arr = [{
            id: "",
            value: "全部",
          }, ];
          this.billTypeList = arr.concat(res.result[0].dictList);
        });
      },
      onSubmit() {
        //查询
        this.pageOptions.pageNum = 1
        this.$refs.table.pageOptions.pageNum = 1
        this.getList();
      },
      reset() {
        this.cardData = {}
        this.pageOptions.pageNum = 1
        this.$refs.table.pageOptions.pageNum = 1
        this.getList();
      },
      getList() { //查询商家所有的卡列表
        this.cardData.merchantId = this.id
        const params = {
          ...this.pageOptions,
          ...this.cardData,
        };
        this.loading = true;
        merchantCardList(params)
          .then((res) => {
            this.tableDataTwo = res.result.records;
            this.$refs.table.pageOptions.total = res.result.total;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      addCard(assetId) { //添加至参保预付卡
        const params = {
          merchantId: this.id,
          assetId: assetId
        };
        addInsuranceCard(params)
          .then((res) => {
            this.$message.success('添加成功');
            setTimeout(() => {
              this.reset()
              this.$emit('success')
            }, 800)
          })
          .finally(() => {
            this.loading = false;
          });
      },
    }
  }

</script>
<style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
    }
  }

  .dia_detail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }

  .dia_detail_l {
    width: 160px;
    text-align: right;
  }

  .dia_detail_r {
    display: flex;
    align-items: center;
  }

  .listBox_head {
    margin-bottom: 10px;
  }

</style>
